
 /**
  * 图层帘
  * options 中必须指定 swipe_layer - 要卷帘的具体layer
  * 
  */

SwipeControl = function(opt_options) {
	
	this.unSelectStyle = 'box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px; border-width: 1px; border-style: solid; border-color: rgb(139, 164, 220); background: rgb(255, 255, 255); padding: 2px 6px; font-style: normal; font-variant: normal; font-stretch: normal; font-size: 12px; line-height: 1.3em; font-family: arial, sans-serif; text-align: center; white-space: nowrap; border-radius: 0px 3px 3px 0px; color: rgb(0, 0, 0);' ;
	this.selectStyle = 'box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px;border-left: 1px solid rgb(139, 164, 220);border-top: 1px solid rgb(139, 164, 220);border-bottom: 1px solid rgb(139, 164, 220);background: rgb(46, 73, 134);padding: 2px 6px;font-style: normal;font-variant: normal;font-stretch: normal;font-size: 12px;line-height: 1.3em;font-family: arial, sans-serif;text-align: center;white-space: nowrap;border-radius: 3px 0px 0px 3px;color: rgb(255, 255, 255);font-weight: bold;' ;
 
	var options = opt_options ? opt_options : {};

	//图层帘针对哪个图层 必须配
	this.swipe_layer = options.swipe_layer ;
	//隐藏掉该图层 后面通过卷帘绘制
	this.swipe_layer.setVisible(false);
   
 
	var className = options.className !== undefined ? options.className : '';
 

	var label = '\u5377\u5E18'; 

	var tipLabel = '\u5377\u5E18 '; 

	var pie_element = document.createElement('button');

	this.pie_element = pie_element;
	pie_element.className = className  ;
	pie_element.style = this.unSelectStyle ;
	pie_element.setAttribute('type', 'button');
	pie_element.title = tipLabel;
	pie_element.appendChild(
			typeof label === 'string' ? document.createTextNode(label) : label
	);
     

	var cssClasses = className /*+ ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
      ol.css.CLASS_CONTROL*/;
	var element = document.createElement('div');
	element.className = cssClasses;
	element.appendChild(pie_element); 
   
	element.style = 'bottom: auto; right: 150px; top: 10px; left: auto; white-space: nowrap; cursor: pointer; position: absolute; z-index: 10; text-size-adjust: none;'
 
	var ts = this ; 
	ol.control.Control.call(this, {
	    element: element,
	    target: options.target  
	  });
 
	pie_element.onclick = function(){
		var status = ts.status ;
		if(status && status == 'click' ) {
			status = 'none';
		} else {
			status = 'click';
		}
		
	   ts. handleClick_(status);

	   ts.status = status ;
	};
 
	 
};
ol.inherits(SwipeControl, ol.control.Control);

/**
 * 鼠标点击后切换状态
 */
SwipeControl.prototype.handleClick_ = function(_status ) {
   
  if(_status == 'click'){
	  this.pie_element.style = this.selectStyle; // = 选中;
	 
  } else if(_status == 'none'){
	 
	  this.pie_element.style = this.unSelectStyle;// = 未选中;
  }
  
  this.swither_(_status);
  
};
  

/**
 * 
 * @param 切换状态
 */ 
SwipeControl.prototype.swither_ = function(_status) {
  
	var map = this.getMap();
	 
	if(_status == 'click'){
		
		//添加监听
		this.swipe_layer.on('precompose', this.precompose , this);

		this.swipe_layer.on('postcompose', this.postcompose);

		map.on('pointermove', this.pointermove , this);
		
		//显示图层
		this.swipe_layer.setVisible(true);
		 
	
	} else {
		//去掉
		this.swipe_layer.un('precompose', this.precompose, this);

		this.swipe_layer.un('postcompose', this.postcompose);

		map.un('pointermove', this.pointermove , this);
		
		//隐藏图层
		this.swipe_layer.setVisible(false);
	}
   
};

 
SwipeControl.prototype.pointermove = function(evt) {
	 if (evt.dragging  ) {
         return;
       }
       var pixel = this.getMap().getEventPixel(evt.originalEvent);
      this.height = pixel[1];
      this.getMap().render();
}


SwipeControl.prototype.postcompose = function(event) {
	  var ctx = event.context;
      ctx.restore();
}

SwipeControl.prototype.precompose = function(event) {
	var ctx = event.context;
    var width = ctx.canvas.width ;
    var height = this.height;

    ctx.save();
    ctx.beginPath();
    ctx.rect(0, 0, width, height);
    ctx.clip();
    
    //最下面画一个黑线 标明
    ctx.moveTo(0,height);
    ctx.lineTo(width,height); 
    ctx.stroke();
}

